<template>
  <div class="content">
    <van-row>
      <van-col span="24" class="personal-header">我的</van-col>
      <van-col span="24" class="content-header">
        <van-row>
          <van-col span="6">
            <!-- @click="onOpenUpload" -->
            <van-cell>
              <van-image
                fit="cover"
                round
                width="60px"
                height="60px"
                src="https://img.yzcdn.cn/vant/cat.jpeg"
              />
            </van-cell>
            <van-popup v-model="show" round>
              <!-- <van-uploader :after-read="afterRead" class="uploader-content" /> -->
              <van-uploader :after-read="afterRead" :style="{ width: '100%'}">
                <van-cell>
                  <van-button plain hairline type="info" round block>上传头像</van-button>
                </van-cell>
              </van-uploader>
            </van-popup>
          </van-col>
          <van-col span="18" class="user-content">
            <van-row>
              <van-col span="18">
                <span class="span-content-header">{{user.name}}</span>
              </van-col>
              <van-col span="18">
                <span class="span-content-footer">{{user.loginId}}</span>
              </van-col>
            </van-row>
          </van-col>
        </van-row>
        <!-- <div style="float:left"></div> -->
      </van-col>
    </van-row>
    <div class="van-hairline--bottom"></div>
    <van-cell value is-link @click="onUpdatePwd()">
      <template #title>
        <span class="custom-title" style="float:left">修改密码</span>
      </template>
    </van-cell>
    <!-- <van-cell value is-link @click="onAbout()">
      <template #title>
        <span class="custom-title" style="float:left">关于我们</span>
      </template>
    </van-cell>-->
    <van-cell value is-link @click="onAdvise()">
      <template #title>
        <span class="custom-title" style="float:left">意见反馈</span>
      </template>
    </van-cell>
    <van-cell value is-link @click="onQuit()">
      <template #title>
        <span class="custom-title" style="float:left">退出系统</span>
      </template>
    </van-cell>
  </div>
</template>
<script>
// 提示框
import { Dialog } from "vant";
import { Toast } from "vant";
export default {
  data() {
    return {
      // 用户信息
      user: "",
      // 更换头像
      show: false,
    };
  },
  created() {
    this.getUserData();
  },
  methods: {
    // 上传头像回调
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
    },
    // 打开更换头像
    onOpenUpload() {
      this.show = true;
    },
    // 用户信息
    getUserData() {
      // 获取用户信息
      let user = this.$session.get("user");
      this.user = JSON.parse(user);
    },
    //  关于
    onAbout() {
      this.$router.push({ name: "aboutUsPage" });
    },
    //  修改密码
    onUpdatePwd() {
      this.$router.push({ name: "updatePwdPage" });
    },
    //  反馈意见
    onAdvise() {
      this.$router.push({ name: "advisePage" });
    },
    // 退出
    onQuit() {
      this.$router.push({ name: "loginPage" });

      // Dialog.confirm({
      //   title: "提示",
      //   message: "退出当前账号？"
      // })
      //   .then(() => {
      //     // on confirm
      //     // 销毁存放用户信息的session
      //     this.$session.destroy();
      //     Toast("退出成功！");
      //     this.$router.push({ name: "loginPage",query:{quitFlag:true} });
      //   })
      //   .catch(() => {
      //     // on cancel
      //   });
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  .personal-header {
    height: 60px;
    width: 100%;
    color: white;
    line-height: 60px;
    background-color: #1989fa;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
    // position: absolute;
    // top: 0px;
  }
  .content-header {
    margin-top: 70px;
    height: 80px;
    .user-content {
      margin-top: 10px;
    }
    .span-content-header {
      float: left;
    }
    .span-content-footer {
      float: left;
      font-size: 12px;
      color: #ccc;
    }
  }
}
</style>